.milkdown-storybook {
  .link-insert-button {
    position: absolute;
    &[data-show='false'] {
      display: none;
    }
    background: bisque;
    cursor: pointer;
    padding: 4px 16px;
    border-radius: 16px;

    &:hover {
      background: burlywood;
    }
  }

  .milkdown-link-preview {
    position: absolute;
    &[data-show='false'] {
      display: none;
    }

    & > .link-preview {
      height: 42px;
      display: flex;
      justify-content: center;
      padding: 8px;
      background: bisque;
      gap: 8px;
      border-radius: 16px;
      cursor: pointer;

      & > .link-display:hover:before {
        display: block;
      }

      & > .link-display:before {
        content: 'click to copy link';
        position: absolute;
        transform: translate(50%, -130%);
        padding: 6px 10px;
        font-size: 12px;
        border-radius: 10px;
        background: #000;
        color: #fff;
        text-align: center;

        display: none;
      }

      & > .link-icon {
        padding: 5px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
      }

      & > .link-display {
        width: 240px;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
        white-space: nowrap;

        &:hover {
          text-decoration: underline;
        }
      }

      & > .button {
        padding: 5px;
        border-radius: 99px;
        display: flex;
        justify-content: center;
        align-items: center;

        &:hover {
          background: burlywood;
        }
      }
    }
  }

  .milkdown-link-edit {
    position: absolute;
    &[data-show='false'] {
      display: none;
    }
    & > .link-edit {
      height: 42px;
      display: flex;
      justify-content: center;
      padding: 8px 12px;
      background: bisque;
      gap: 8px;
      border-radius: 16px;

      & > .input-area {
        outline: none;
        background: transparent;
        width: 200px;
        font-size: 14px;
      }

      & > .button {
        cursor: pointer;
        border-radius: 8px;
        font-size: 12px;
        padding: 4px;

        &:hover {
          background: burlywood;
        }

        &.hidden {
          visibility: hidden;
        }
      }
    }
  }
}
